<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="5" :sm="24" style="padding-right: 5px">
                <a-form-item label="模型字段名称">
                  <a-input-search @search="searchForm" v-model="form.form_field_name" />
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24" style="padding-left: 5px">
                <a-button type="primary" @click="visible = true">添加表单模型字段</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          :columns="columns"
          :data-source="data"
          bordered
          :rowKey="record=>record.form_field_name"
          :pagination="pagination"
        >
          <template
            v-for="col in ['resources_id', 'resources_path']"
            :slot="col"
            slot-scope="text, record"
          >
            <div :key="col">
              {{ col === 'resources_path' ? `${BASE_URL}/community/tool/get_file/${record.form_name}` :text }}
            </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <a @click="_setTitleField(record)" style="float: left; margin-right: 10px;">设置为标题列</a>
            <div class="editable-row-operations">
              <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => del(record)">
                <a>删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
    </template>
    <a-modal v-model="visible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="_addForm">
      <a-form
        :form="forms"
        @submit="_addForm"
      >
        <a-form-item
          v-for="(item, index) in add"
          :key="index"
          :label="item.title"
          v-if="item.title"
        >
          <a-select
            v-if="item.type === 'select'"
            style="width: 120px"
            v-decorator="[
              index,
              {rules: [{ required: true, message: item.errMessage }], validateTrigger: 'blur', initialValue: item.value}
            ]"
          >
            <a-select-option
              v-for="(types, i) in item.data"
              :key="i"
              :value="types.type"
            >
              {{ types.title }}
            </a-select-option>
          </a-select>
          <a-input
            v-else
            v-decorator="[
              index,
              {rules: [{ required: true, message: item.errMessage }], validateTrigger: 'blur', initialValue: item.value}
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  getFields,
  addField,
  delField,
  setTitleField
} from '@/api/form'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
const columns = [
  {
    title: 'form_id',
    dataIndex: 'form_id',
    width: '5%',
    scopedSlots: { customRender: 'form_id' }
  },
  {
    title: 'form_field_name',
    dataIndex: 'form_field_name',
    width: '10%',
    scopedSlots: { customRender: 'form_field_name' }
  },
  {
    title: 'form_field_type',
    dataIndex: 'form_field_type',
    width: '10%',
    scopedSlots: { customRender: 'form_field_type' }
  },
  {
    title: 'form_field_length',
    dataIndex: 'form_field_length',
    width: '15%',
    scopedSlots: { customRender: 'form_field_length' }
  },
  {
    title: 'form_field_description',
    dataIndex: 'form_field_description',
    width: '15%',
    scopedSlots: { customRender: 'form_field_description' }
  },
  {
    title: 'form_field_default',
    dataIndex: 'form_field_default',
    width: '15%',
    scopedSlots: { customRender: 'form_field_default' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '15%',
    scopedSlots: { customRender: 'operation' }
  }
]

const fieldType = [{
  title: '富文本',
  type: 'TEXT'
}, {
  title: '文本',
  type: 'STRING'
}, {
  title: '开关状态',
  type: 'SWITCH'
}, {
  title: '整型',
  type: 'BIGINT'
}, {
  title: '浮点型',
  type: 'FLOAT'
}, {
  title: '文件',
  type: 'FILE'
}, {
  title: '文件列表',
  type: 'FILELIST'
}]

export default {
  data () {
    return {
      data: [],
      visible: false,
      columns,
      editingKey: '',
      form: {
        page: 1,
        form_field_name: '',
        form_id: 0
      },
      forms: this.$form.createForm(this),
      add: {
        form_field_name: {
          title: '表字段名称',
          errMessage: '表字段名称不能为空',
          value: ''
        },
        form_field_as_name: {
          title: '表字段别名',
          errMessage: '表字段别名不能为空',
          value: ''
        },
        form_field_type: {
          title: '表字段值类型',
          errMessage: '表字段值类型不能为空',
          value: '',
          type: 'select',
          data: fieldType
        },
        form_field_length: {
          title: '表字段值长度',
          errMessage: '表字段值长度不能为空',
          value: ''
        },
        form_field_description: {
          title: '表字段描述',
          errMessage: '表字段描述不能为空',
          value: ''
        },
        form_field_default: {
          title: '表字段默认值',
          errMessage: '表字段默认值不能为空',
          value: ''
        }
      },
      pagination: {
      }
    }
  },
  components: {
    PageHeaderWrapper
  },
  mounted () {
    this.form.form_id = this.$route.params.form_id
    this.searchForm()
  },
  watch: {
    visible (val) {
      if (val) {
        Object.keys(this.add).map(k => {
          this.add[k].value = ''
        })
        this.forms.resetFields()
      }
    }
  },
  methods: {
    searchForm () {
      getFields(this.form).then(res => {
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
      })
    },
    _addForm (e) {
      e.preventDefault()
      const {
        forms: { validateFields }
      } = this
      validateFields(Object.keys(this.add), { force: true }, (err, values) => {
        if (!err) {
          const Params = { ...values }
          Params.form_id = this.form.form_id
          addField({
            formFieldInfo: Params
          }).then(res => {
            this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
            if (res.code !== 200) return
            this.data.push(res.items)
          })
          this.visible = false
        }
      })
    },
    del (data) {
      delField(data).then(res => {
        if (res.code !== 200) {
          this.$message.warning(res.msg)
          return
        }
        this.searchForm()
      })
    },
    _setTitleField (item) {
      item.form_id = this.form.form_id
      setTitleField(item).then(res => {
        this.$message.info(res.msg)
      })
    }
  }
}
</script>
<style scoped>
</style>
